<!DOCTYPE html>
<html ng-app = "app">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="semantic/semantic.css">
</head>
<body>
  <style type="text/css">
    .fl{
      float: left;
    }
    .inline-block:{
      display: inline-block;
    }
    .width-100{
      width: 100px;
    }
    .ui.popup{
      color: red;
    }
  /*.ui.form input.ng-invalid.ng-touched {
    background-color: #FA787E;
  }

  .ui.form input.ng-valid.ng-touched {
    background-color: #78FA89;
  }*/
</style>
<div ng-controller="Ctrl">
<div class="ui form">
  <div class="field">
    <label>Country {{p}}</label>
    <select multiple="" class="ui dropdown" ng-model="p">
      <option value="">Select Country</option>
      <option value="AF">Afghanistan</option>
      <option value="AX">Åland Islands</option>
      <option value="AL">Albania</option>
      <option value="DZ">Algeria</option>
      <option value="AS">American Samoa</option>
      <option value="AD">Andorra</option>
      <option value="AO">Angola</option>
    </select>
  </div>
</div>
  <div class="ui form">
    <div class="grouped fields">
      <label for="fruit">Select your second favorite fruit: {{radio}}</label>
      <div class="field">
        <div class="ui radio checkbox" ng-click="choose('Apples')">
          <input type="radio" name="fruit"  tabindex="0" class="hidden" value="Apples" ng-model="radio">
          <label>Apples</label>
        </div>
      </div>
      <div class="field">
        <div class="ui radio checkbox">
          <input type="radio" name="fruit" tabindex="0" class="hidden" value="Oranges" ng-model="radio">
          <label ng-click="choose('Oranges')">Oranges</label>
        </div>
      </div>
      <div class="field">
        <div class="ui radio checkbox">
          <input type="radio" name="fruit" tabindex="0" class="hidden" value="Pears" ng-model="radio">
          <label ng-click="choose('Pears')">Pears</label>
        </div>
      </div>
      <div class="field">
        <div class="ui radio checkbox">
          <input type="radio" name="fruit" tabindex="0" class="hidden" value="Grapefruit" ng-model="radio">
          <label ng-click="choose('Grapefruit')">Grapefruit</label>
        </div>
      </div>
    </div>
  </div>











  <div class="popup target">这是一个提示卡</div>



  {{toolBar|json}}
  <div class="ui text container"
  tool-bar-generate
  tool-bar = 'toolBar'></div>
  <div my-tool-bar tool-bar = 'toolBar'></div>
</div>

<div class="ui text container">
 <form class="ui fluid form error" name="form" novalidate>
  <h2>{{form}}</h2>
  <div ng-class="{'error':!form.username.$valid && form.username.$touched,'success':form.username.$valid,'field':true}">
    <label>用户名{{form.username}}</label>
    
    <input type="text"
    name="username" 
    placeholder="user" 
    ng-model="username" 
    compare 
    ng-model-options="{updateOn:'blur'}"
    username-reg 
    required>

  </div>
  <div class="ui error message" ng-messages="form.username.$error" ng-if="form.username.$dirty && form.username.$invalid">
    <div ng-message="required">用户名不能为空</div>
    <div ng-message="username">该用户名已注册</div>
  </div>


  <div class="field">
   <label>最大值{{form.max}}</label>
   <input type="number" name="max" placeholder="max" ng-model="max" required ng-compare compare-op="gt" compare-to="0" ng-model-options="{ updateOn: 'blur' }">
 </div>
 <div class="ui error message" ng-show="form.max.$touched && form.max.$invalid">
  <span ng-show="form.max.$error.compareTo">最大值不能小于0</span>
  <span ng-show="form.max.$error.required">最大值不能为空</span>
</div>
<div class="field">
 <label>最小值{{form.min}}</label>
 <input type="number" name="min" required ng-model="min" ng-compare compare-to="max" compare-op="lt" >
</div>
<div class="ui error message" ng-show="form.min.$touched && form.min.$invalid">
  <span ng-show="form.min.$error.compareTo">最小值不能大于最大值</span>
  <span ng-show="form.min.$error.required">最大值不能为空</span>
</div>

<div class="field">
 <label>手机号{{form.mobile}}</label>
 <input type="number" name="mobile" required ng-model="mobile" ng-compare compare-to="mobile" compare-op="RegExp" >
</div>
<div class="ui error message" ng-show="form.mobile.$touched && form.mobile.$invalid">
  <span ng-show="form.mobile.$error.compareTo">手机号格式错误</span>
  <span ng-show="form.mobile.$error.required">手机号不能为空</span>
</div>
<div class="field">
 <button ng-disabled="!form.$valid" class="ui button">loghin</button>
</div>
</form>
</div>


</body>
<script src="libs/angular.js"></script>
<script src="libs/angular-messages.js"></script>
<script src="libs/jquery-1.11.3.min.js"></script>
<script src="semantic/semantic.min.js"></script>
<script src="app.js"></script>
</html>